<template>
    <div class="me">
        <van-row>
            <van-col class="top" span="24">
                <van-icon name="ellipsis" size="40" @click="logout" />
            </van-col>
            <van-col span="8">
                <van-col span="24">
                    <van-uploader :after-read="afterRead">
                        <van-image class="photo" round width="7rem" fit="cover"
                            :src="'data:image/png;base64,' + user.photo" />
                    </van-uploader>

                </van-col>
            </van-col>
            <van-col span="16">
                <van-col class="user_mes" span="24">{{ user.username }}</van-col>
                <van-col class="user_mes da_number" span="24">搭子号: {{ user.dazi_number }}</van-col>
            </van-col>
        </van-row>
        <van-divider />
        <van-row>
            <van-col span="12" v-for="(item, i) in list" :key="i">
                <van-image width="12rem" fit="cover" :src="'data:image/png;base64,' + item.photo"
                    @click="contentPage(item.id)" />
                <van-field v-model="item.content" rows="1" autosize type="textarea" />

                <van-row>
                    <van-col span="8"><van-icon name="like-o" :badge="item.good == 0 ? '' : item.good" /></van-col>
                </van-row>
            </van-col>

        </van-row>

        <van-tabbar v-model="active" fixed @change="onChange">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="tv-o">直播</van-tabbar-item>
            <van-uploader :after-read="afterRead2">
                <van-tabbar-item icon="plus">搭一搭</van-tabbar-item>
            </van-uploader>
            <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
            <van-tabbar-item icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'Me',
    data() {
        return {
            list: [],
            active: 4,
            user: {},
        }
    },
    created: function () {
        const tel = window.localStorage.getItem("dazi_")
        this.$axios.get('http://localhost:9090/dazi/user/findUserAllByTel?tel=' + tel)
            .then(res => {
                this.user = res.data
                if (res.data) {

                    this.$axios.get('http://localhost:9090/dazi/content/findByDazi/' + this.user.dazi_number)
                        .then(res => {
                            this.list = res.data;
                        })
                }
            })


    },
    methods: {
        afterRead2(file) {
            this.$router.push({ path: '/say', query: { file: file } })
        },
        afterRead(file) {
            const tel = window.localStorage.getItem('dazi_')
            const img = file.content.split('base64,')[1]

            const mes = {
                image: img,
                tel: tel
            }

            this.$axios.post('http://localhost:9090/dazi/user/updatePhoto', mes)
                .then(res => {
                    history.go(0)
                    // this.$router.push("/me")
                })
        },
        contentPage(id) {
            this.$router.push({ path: '/contentPage', query: { contentId: id } })
        },
        logout() {
            window.localStorage.removeItem("dazi_")
            this.$toast({ message: "已退出账号", position: 'top' })

            this.$router.push("/login")


        },

        onChange(index) {

            if (index == 0) {
                this.$router.push("/")
            }

            if (index == 1) {
                this.$router.push("/tv");
            }
            if (index == 3) {
                const data = window.localStorage.getItem('dazi_')
                if (data) {
                    this.$router.push("/chatList");
                } else {
                    this.$router.push("/login");
                }

            }


        },
    }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-icon {
    margin: 10px 10px;
}

.photo {
    margin: 10px;
}

.user_mes {
    margin: 10px;
}

.da_number {
    font-size: 10px;
}

.van-col {
    padding-left: 1.5px;
    margin: 6px 0;
}
</style>
